<template>
  <div class="demo-button">
    <h4>text属性</h4>
    <epee-button text="label"></epee-button>
    <h4>slot属性</h4>
    <epee-button><div>slot属性</div></epee-button>
    <h4>type</h4>
    <epee-button
      v-for="(item, index) in [
        'default',
        'primary',
        'success',
        'warn',
        'error',
        'info',
      ]"
      :text="item"
      :key="`${item}-${index}`"
      :type="item"
    />
    <h4>size</h4>
    <div>
      <epee-button
        v-for="i in ['large', 'middle', 'small']"
        :key="i"
        :size="i"
        >{{ i }}</epee-button
      >
    </div>
    <h4>shape</h4>
    <div>
      <epee-button v-for="i in ['circle', 'round']" :key="i" :shape="i">{{
        i
      }}</epee-button>
    </div>
    <h4>block</h4>
    <div>
      <epee-button block>block</epee-button>
    </div>

    <h4>htmlType</h4>
    <div>
      <epee-button
        :htmlType="i"
        v-for="i in ['submit', 'reset', 'button']"
        :key="i"
      >
        {{ i }}
      </epee-button>
    </div>
    <h4>loading</h4>
    <div><epee-button loading>loading</epee-button></div>

    <h4>disabled</h4>
    <div>
      <epee-button type="primary" :disabled="disabled"
        >disabled: {{ disabled }}</epee-button
      >
      <epee-button @click="changeDisabled">改变状态</epee-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { EpeeButton } from "epee-ui";
export default defineComponent({
  name: "DocsNormalButton",

  setup(props, setupContext) {
    const disabled = ref<boolean>(true);
    const methods = {
      changeDisabled: () => {
        disabled.value = !disabled.value;
      },
    };
    return {
      disabled,
      ...methods,
    };
  },
});
</script>

<style lang="scss" scoped></style>
